<template>
  <div class="main">
    <topCard :topList="MediatopList" v-if="checkRole(['admin', 'newMediaUser'])"></topCard>
    <topCard :topList="MakertopList" v-if="checkRole(['admin', 'contentUser'])"></topCard>
    <div class="box">
      <div class="top_title">认证资料</div>
      <div style="width: 1360px;">
        <div v-if="checkRole(['admin', 'contentUser'])">
          <el-tabs v-model="activeName" @tab-click="handleClick" class="my_tabs">
            <el-tab-pane label="个人资料认证" name="first" v-if="roleType !== 2">
              <makerUser></makerUser>
            </el-tab-pane>
            <el-tab-pane label="机构资料认证" name="second" v-if="roleType !== 1">
              <jigou></jigou>
            </el-tab-pane>
          </el-tabs>
        </div>
        <mediaUser v-if="checkRole(['admin', 'newMediaUser'])"></mediaUser>
        <shenheUser v-if="checkRole(['admin', 'examine'])"></shenheUser>
      </div>
    </div>
  </div>
</template>

<script>
import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
import topCard from './components/top'
import mediaUser from './components/media'
import makerUser from './components/maker'
import shenheUser from './components/shenhe'
import jigou from './components/jigou'
import { getInfoByUserId } from '@/api/my'
export default {
  components: { topCard, mediaUser, makerUser, jigou, shenheUser },
  name: '',
  data() {
    return {
      MediatopList: {
        data: [
          { title: '浏览、分享、收藏', name: '下载资源' },
          { title: '作品需求发布和管理', name: '科普活动发布和管理' },
          { title: '内容传播认证奖励', name: '' },
          { title: '', name: '' },
        ],
        title: '新媒体'
      },
      MakertopList: {
        data: [
          { title: '浏览、分享、收藏', name: '下载资源' },
          { title: '科普内容发布和管理', name: '科普资源上传和管理' },
          { title: '科普活动发布和管理', name: '作品扶持或奖励' },
          { title: '原创内容创作证书', name: '内容传播认证奖励' },
        ],
        title: '创作者'
      },
      activeName: 'first',
      roleType: null,   //认证类型创作者（1：个人认证资料 2：机构认证资料）3：新媒体4：审核者
    }
  },
  async created() {
    // console.log();
    await this.getAuthMyList()
  },
  methods: {
    checkPermi,
    checkRole,
    handleClick(tab, event) {
      if (tab.name == 'first') {

        console.log('个人资料认证');
      }
      if (tab.name == 'second') {
        console.log('机构资料认证');
      }
      //console.log(tab, event);
    },
    async getAuthMyList() {
      let res = await getInfoByUserId(this.$store.state.user.userId)
      if (res.code == 200) {
        // console.log(123);
        this.roleType = res.data.roleType
        if (this.roleType == 1) {
          this.activeName = 'first'
          return
        }
        if (this.roleType == 2) {
          this.activeName = 'second'
          return
        }
        // console.log(this.roleType);
      }
    }
  },

}
</script>

<style lang='scss' scoped>
.el-upload__tip {
  line-height: 1.2;
}

.main {
  background-color: #F5F5F5;

  .box {
    // width: 1400px;
    margin-top: 10px;
    padding-top: 20px;
    width: 100%;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    @media screen and (min-resolution: 144dpi) {
      width: 1400px;
    }

    padding-bottom: 100px;

    .top_title {
      font-size: 16px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 700;
      color: #3D3D3D;
      line-height: 21px;
      width: 100%;
      padding: 31px 0 0 32px;
    }

    .my_tabs {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      //  position: fixed !important;
      //width: 30%;
    }
  }
}
</style>